<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
            <a-form size="small" :model="query" layout="inline">
                <a-form-item label="日期">
                    <a-date-picker popup-container="html" v-model="query.beginDate" :style="{ width: '180px' }"
                        placeholder="选择日期" class="bacClass" />至 <a-date-picker popup-container="html"
                        v-model="query.enginDate" :style="{ width: '180px' }" placeholder="选择日期" class="bacClass" />
                </a-form-item>
                <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader" />
            </a-form>
            <div class="my-tool-bar" style="margin-bottom: 5px">
                <a-space>
                    <el-button v-if="infoType == 1" type="primary" :icon="Search" @click="getList">查询</el-button>
                    <el-button v-else type="primary" @click="ListFans">返回</el-button>
                    <!-- <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button> -->
                </a-space>
            </div>
        </div>
        <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div>

        <div style="background-color: #f0f2f5; height: 10px"></div>
        <div :style="{ height: '88%', padding: '10px', overflow: 'aout' }" v-loading="loadings">
            <div style="width: 100%; height: 100%" v-if="infoType == 1">
                <a-tag color="#5e8af5">疵布率/降等率计表（汇总）</a-tag>
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                    @grid-ready="gridReady" style="height:100%" @rowClicked="agGridClicks" :defaultColDef="defaultColDef"
                    class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc" :localeText="localeText1">
                </AgGridVuesCopys>
            </div>
            <div style="width: 100%; height: 100%" v-if="infoType == 2">
                <a-tag color="#5e8af5">疵布率/降等率计表（分厂/部门、班别）</a-tag>
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                    @grid-ready="gridReady2" style="height:100%" @rowClicked="agGridClicks2" :defaultColDef="defaultColDef"
                    class='ag-theme-alpine' :rowData="tableDataList2" :columnDefs="tc" :localeText="localeText1">
                </AgGridVuesCopys>
            </div>
            <div style="width: 100%; height: 100%" v-if="infoType == 3">
                <a-tag color="#5e8af5">疵布率/降等率计表（值机班长及个人）</a-tag>
                <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                    @grid-ready="gridReady3" style="height:100%" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                    :rowData="tableDataList3" :columnDefs="tc2" :localeText="localeText1">
                </AgGridVuesCopys>
            </div>
        </div>
    </div>
</template>
    
<script lang="ts" setup>

import * as echarts from 'echarts'

import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { localeText } from '@/api/aggridZw'
const localeText1: any = ref(localeText)
const emit = defineEmits(['takebiaoji'])
const headerShow = ref<boolean>(true)



const infoType = ref(1)

const loadings = ref(false)


const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
}

interface Querin {
    beginDate: any
    enginDate: any
    planOrderCode: any
}
//getlist初始化接口参数
let query = reactive<Querin>({
    beginDate: dayjs().format('YYYY-MM-DD'), //当月日期
    enginDate: dayjs().format('YYYY-MM-DD'), //当月日期
    // enginDate: formatDateTime(new Date(Number(new Date().getTime()) + (60 * 1000 * 60 * 24 * 7)), 'yyyy-MM-dd'), //当月日期
    planOrderCode: null,
})
function formatDateTime(date: any, format: any) {
    const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
        'H+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds(), // 毫秒
        a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
        A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (let k in o) {
        if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(
                RegExp.$1,
                RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
            );
        }
    }
    return format;
}

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const tableDataList2: any = ref([])
const gridOption2 = ref()
const gridReady2 = (params: any) => {
    gridOption2.value = params.api
}
const tableDataList3: any = ref([])
const gridOption3 = ref()
const gridReady3 = (params: any) => {
    gridOption3.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
}

const tc = [
    {
        headerName: '织厂单位',
        field: 'firm',
        width: 150,
        cellRenderer: {
            template: `
            <a-space :style="{width:'100%',height:'100%',textAlign:'center'}">
                <a-tag class="tagCss">{{a}}</a-tag>
            </a-space>
            `,
            setup(props: any) {
                const a = ref(props.params.data.firm)
                return {
                    a,
                }
            }
        }
    },
    {
        headerName: '部门',
        field: 'department',
        width: 150
    },
    {
        headerName: '统计开始时间',
        field: 'queryStart',
        width: 150
    },
    {
        headerName: '统计结束时间',
        field: 'queryEnd',
        width: 150
    },
    {
        headerName: '单面产量（KG）',
        field: 'singleYield',
        width: 150
    },
    {
        headerName: '单面疵布重量(KG)',
        field: 'singleDefectiveWeight',
        width: 150
    },
    {
        headerName: '单面疵布率（%）',
        field: 'singleDefectiveRate',
        width: 150,
        cellRenderer: {
            template: `<span>{{val}}%</span>`,
            setup(props: any) {
                return {
                    val: props.params.data.singleDefectiveRate,

                }
            }
        },
    },
    {
        headerName: '单面降等重量(KG)',
        field: 'singleDisposeWeight',
        width: 150
    },
    {
        headerName: '单面降等率（%）',
        field: 'singleDisposeRate',
        width: 150
    },

    {
        headerName: '双面产量（KG）',
        field: 'doubleYield',
        width: 150
    },
    {
        headerName: '双面疵布重量(KG)',
        field: 'doubleDefectiveWeight',
        width: 150
    },
    {
        headerName: '双面疵布率（%）',
        field: 'doubleDefectiveRate',
        width: 150,
        cellRenderer: {
            template: `<span>{{val}}%</span>`,
            setup(props: any) {
                return {
                    val: props.params.data.doubleDefectiveRate,

                }
            }
        },
    },
    {
        headerName: '双面降等重量(KG)',
        field: 'doubleDisposeWeight',
        width: 150
    },
    {
        headerName: '双面降等率（%）',
        field: 'doubleDisposeRate',
        width: 150
    },
    {
        headerName: '罗纹产量（KG）',
        field: 'ribYield',
        width: 150
    },
    {
        headerName: '罗纹疵布重量(KG)',
        field: 'ribDefectiveWeight',
        width: 150
    },
    {
        headerName: '罗纹疵布率（%）',
        field: 'ribDefectiveRate',
        width: 150,
        cellRenderer: {
            template: `<span>{{val}}%</span>`,
            setup(props: any) {
                return {
                    val: props.params.data.ribDefectiveRate,

                }
            }
        },
    },
    {
        headerName: '罗纹降等重量(KG)',
        field: 'ribDisposeWeight',
        width: 150
    },
    {
        headerName: '罗纹降等率（%）',
        field: 'ribDisposeRate',
        width: 150
    },
    {
        headerName: '总产量（KG）',
        field: 'totalYield',
        width: 150
    },
    {
        headerName: '总疵布重量(KG)',
        field: 'totalDefectiveWeight',
        width: 150
    },
    {
        headerName: '总疵布率（%）',
        field: 'totalDefectiveRate',
        width: 150,
        cellRenderer: {
            template: `<span>{{val}}%</span>`,
            setup(props: any) {
                return {
                    val: props.params.data.totalDefectiveRate,

                }
            }
        },
    },
    {
        headerName: '总降等重量(KG)',
        field: 'totalDisposeWeight',
        width: 150
    },
    {
        headerName: '总降等率（%）',
        field: 'totalDisposeRate',
        width: 150
    },
    {
        headerName: '目标值',
        field: 'targetValue',
        width: 150
    },
    {
        headerName: '原因分析',
        field: 'cause',
        width: 150
    },
]
const tc2 = [
    {
        headerName: '织厂单位',
        field: 'firm',
        width: 150
    },
    {
        headerName: '部门',
        field: 'department',
        width: 150
    },
    {
        headerName: '岗位',
        field: 'postName',
        width: 150
    },
    {
        headerName: '值机班长/员工',
        field: 'empName',
        width: 150
    },
    {
        headerName: '统计开始时间',
        field: 'queryStart',
        width: 150
    },
    {
        headerName: '统计结束时间',
        field: 'queryEnd',
        width: 150
    },
    {
        headerName: '单面产量（KG）',
        field: 'singleYield',
        width: 150
    },
    {
        headerName: '单面疵布重量(KG)',
        field: 'singleDefectiveWeight',
        width: 150
    },
    {
        headerName: '单面疵布率（%）',
        field: 'singleDefectiveRate',
        width: 150,
        cellRenderer: {
            template: `<span>{{val}}%</span>`,
            setup(props: any) {
                return {
                    val: props.params.data.singleDefectiveRate,

                }
            }
        },
    },
    {
        headerName: '单面降等重量(KG)',
        field: 'singleDisposeWeight',
        width: 150
    },
    {
        headerName: '单面降等率（%）',
        field: 'singleDisposeRate',
        width: 150
    },
    {
        headerName: '双面产量（KG）',
        field: 'doubleYield',
        width: 150
    },
    {
        headerName: '双面疵布重量(KG)',
        field: 'doubleDefectiveWeight',
        width: 150
    },
    {
        headerName: '双面疵布率（%）',
        field: 'doubleDefectiveRate',
        width: 150,
        cellRenderer: {
            template: `<span>{{val}}%</span>`,
            setup(props: any) {
                return {
                    val: props.params.data.doubleDefectiveRate,

                }
            }
        },
    },
    {
        headerName: '双面降等重量(KG)',
        field: 'doubleDisposeWeight',
        width: 150
    },
    {
        headerName: '双面降等率（%）',
        field: 'doubleDisposeRate',
        width: 150
    },
    {
        headerName: '罗纹产量（KG）',
        field: 'ribYield',
        width: 150
    },
    {
        headerName: '罗纹疵布重量(KG)',
        field: 'ribDefectiveWeight',
        width: 150
    },
    {
        headerName: '罗纹疵布率（%）',
        field: 'ribDefectiveRate',
        width: 150,
        cellRenderer: {
            template: `<span>{{val}}%</span>`,
            setup(props: any) {
                return {
                    val: props.params.data.ribDefectiveRate,

                }
            }
        },
    },
    {
        headerName: '罗纹降等重量(KG)',
        field: 'ribDisposeWeight',
        width: 150
    },
    {
        headerName: '罗纹降等率（%）',
        field: 'ribDisposeRate',
        width: 150
    },
    {
        headerName: '总产量（KG）',
        field: 'totalYield',
        width: 150
    },
    {
        headerName: '总疵布重量(KG)',
        field: 'totalDefectiveWeight',
        width: 150
    },
    {
        headerName: '总疵布率（%）',
        field: 'totalDefectiveRate',
        width: 150,
        cellRenderer: {
            template: `<span>{{val}}%</span>`,
            setup(props: any) {
                return {
                    val: props.params.data.totalDefectiveRate,

                }
            }
        },
    },
    {
        headerName: '总降等重量(KG)',
        field: 'totalDisposeWeight',
        width: 150
    },
    {
        headerName: '总降等率（%）',
        field: 'totalDisposeRate',
        width: 150
    },
    {
        headerName: '目标值',
        field: 'targetValue',
        width: 150
    },
    {
        headerName: '原因分析',
        field: 'cause',
        width: 150
    },
]

const agGridClicks = () => {
    selectJt2()
}

const agGridClicks2 = () => {
    selectJt3()
}

//初始化
onMounted(async () => {
    selectJt()
})

function selectJt() {
    if(!query.enginDate || !query.beginDate){
        Message.error('日期必选')
        return
    }
    loadings.value = true
    post({
        url: 'qms/report/defectiveClothOrLevelingRateReport',
        data: {
            // "firmId": query.planOrderCode, //公司ID
            "firmId": query.planOrderCode, //公司ID
            "dateStart": query.beginDate,
            "dateEnd": query.enginDate
        }
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList.value = res.data
            loadings.value = false
        } else {
            Message.error(res.message)
        }
    }).finally(() => {
        loadings.value = false
    })
}
function selectJt2() {
    loadings.value = true
    post({
        url: 'qms/report/defectiveClothOrLevelingRateReportByDepartment',
        data: {
            // "firmId": query.planOrderCode, //公司ID
            "firmId": gridOption.value.getSelectedRows()[0].firmId, //公司ID
            "dateStart": query.beginDate,
            "dateEnd": query.enginDate
        }
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList2.value = res.data
            infoType.value = 2
            loadings.value = false
        } else {
            Message.error(res.message)
        }
    }).finally(() => {
        loadings.value = false
    })
}

function selectJt3() {
    loadings.value = true
    post({
        url: 'qms/report/defectiveClothOrLevelingRateReportByEmp',
        data: {
            // "firmId": query.planOrderCode, //公司ID
            "firmId": gridOption2.value.getSelectedRows()[0].firmId, //公司ID
            "departmentName": gridOption2.value.getSelectedRows()[0].department, //部门名称
            "dateStart": query.beginDate,
            "dateEnd": query.enginDate
        }
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList3.value = res.data
            infoType.value = 3
            loadings.value = false
        } else {
            Message.error(res.message)
        }
    }).finally(() => {
        loadings.value = false
    })
}

const getList = () => {
    selectJt()
}
const ListFans = () => {
    if (infoType.value != 1) {
        infoType.value = infoType.value - 1
    }
}
</script>
<style scoped>
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}
</style>
    